/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, Table, TableRow, TableBody, Cell, Button, TextArea, TableHead,
} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps, ReproducibleViewProps, useInputControlSure, useInputReproducible,
} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import { tableSetInp} from "../../../common/tool";
import {TailMenRowIspCheck} from "../../contain/rarelyVary";
import queryString from "query-string";
import {DirectLink, Link as RouterLink} from "../../../routing/Link";
import {useFoldForList, useFoldGenerate, useSplitSubCapacity} from "../../hook/useMainRepUrlOr";


export interface ReproducibleProps extends InternalItemProps {
    table: string;
    iAname?: string[];
}
/** 可重复分项的【简易模式】：   dxtix : 同一个重复分项的序号；
 【非常特殊的】 实际名字 是在/boiler/power/<CutPipeScale table={'割管表'} 注入的； @ 唯一性检查！
* */
export const ConclusionAppendix=
    React.forwardRef(({ children, show ,alone=true,redId,nestMd,refWidth,rep,table,label,iAname,verId}:ReproducibleProps,  ref
    ) => {
        const qs= queryString.parse(window.location.search);
        const dxtix =Number(qs?.dxtix) || 0;
        const {inp, setInp,onSure} = useInputControlSure({ ref,redId,nestMd });
        const itemA = React.useMemo(() => {
            return [ table,  ...iAname ?? [] ];
        }, [ table,iAname]);
        const [getInpFilter]=useMeasureInpFilter(null,itemA,);
        const dxtSize= inp?.[table]?.length || 0;
        const row=undefined===inp?.[table]?.[dxtix]? dxtSize : dxtix;
        //局限化setInpr和inpr：只能对于某一个具体可重复分项的简易模式做出的分项报告。【和特定一个分项报告序号捆绑的】。
        const {inpr, setInpr} =useInputReproducible({table,index:row, inp, setInp});
        //都是在一个table[{}]都会提取的； 所以，第二个返回参数用不着了。 setInpr替代setInp，inpr替代inp，【缺点】只能局限于分项有的字段，主报告字段无法操作。【好处】usePrefixDataReview类似的函数无需改！。
        //这里返回_itemA都是嵌套的字段名：在{[table][row]:{这个位置的字段名}}。 而不是主报告的字段。是适配于setInpr所操作的字段。
        // const [renderEditline, _itemA] = useThreeRaftSurvey({inp:inpr, setInp:setInpr, config: config割管垢样, verId });
        return (
            <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                                 alone={alone} label={`${label} ${dxtix + 1} 的管理`}>
                <Text variant="h5">
                  {label}，序号 {dxtix + 1}：
                </Text>
                <hr/>
                发现问题及处理意见:
                <TextArea  value={inpr?.处理意见 ||''} rows={16}
                           onChange={e => setInpr({...inpr, 处理意见: e.currentTarget.value || undefined})}/>
                { children }
                可重复分项：{inp?.[table]?.length || 0}个,当前针对第{row+1}个。<br/>
                <Text variant="h6">想要执行管理对象的：
                    <Button intent="danger"
                            onPress={async () => {
                              //删除的操作：只能采用tableSetInp操作。 setInpr不能用于删除分项值报告自身对象。
                               tableSetInp(table, row, inp, onSure, '_FILE_', undefined ,true);
                            }}
                    >删除</Button>，然后自行离开本界面，返回。
                </Text>
            </InspectRecordLayout>
        );
    });

/*若有图片上传的：
        { !(inp?.[table]?.[row]?._FILE_?.url) ?
            <Text variant="h5">
                没有上传的文件，想要：
                <Button intent="danger"
                        onPress={async () => {
                            // inp?.部图表?.splice(delNo! - 1, delSize);
                            tableSetInp(table, row, inp, onSure, '_FILE_', undefined ,true);
                            // setInp({...inp, 部图表: inp?.部图表,});      //等效setInp({...inp})
                        }}
                >执行管理对象的删除</Button>，然后自行离开本界面，返回。
            </Text>
            :
            <Text variant="h6">
             注：必须删除上传的文件，然后才能执行管理对象的删除。
            </Text>
        }
* */


export interface ReproducibleVwProps{
    orc: any;
    rep: any;
    children?: React.ReactNode;
    table: string;
    //折叠标签的名称：
    title: string;
    //可修改tag ID的关联；
    hash?: string;
}
/**可重复分项：正式报告的；可折叠的。
 * */
export const ConclusionAppendixVw= ({ orc, rep, children,table,title,hash}: ReproducibleVwProps
) => {
    const sizeDg = orc?.[table]?.length || 0;
    const lsBlockMax = useSplitSubCapacity(sizeDg, 8);        //以8张图为一个折叠区组合的。 实际图序号计算 =折叠区序号 * 8 +偏移量。
    const {sumArea, areaContent, btnBindUses} = useFoldForList(orc?.[table], lsBlockMax, false);
    //若独占一整页：下面第二个div <div css={{"@media print": {height: '100vh', overflowY: 'hidden',}}}>
    const callback = (dlPage: any, arak: number, pid: number) => {
        const aIdx = arak * lsBlockMax + pid;      //在总体列表中的顺序号。
        //统一的框架模式：【只能分解两层的组件模式】为了用上hook；
        return <ReproducibleView key={aIdx} orc={orc} rep={rep} table={table} aIdx={aIdx}/>
    }
    const [renderAll] = useFoldGenerate({sumArea, btnBindUses, areaContent, callback, mark: title + '折叠'});
    const dxtNext = (orc?.[table]?.length || 0);
    return <>
        {sizeDg <= 0 &&
            <RouterLink
                href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ConclusionAppendix#ConclusionAppendix`}>
                <Text id='ConclusionAppendix' variant="h4" css={{
                    textAlign: 'center', marginTop: '1rem', "@media print": {display: 'none',},
                }}>{title}-的录入</Text>
            </RouterLink>
        }
        <div id={hash ?? "ConclusionAppendix"}/>
        {renderAll}
        <RouterLink
            href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ConclusionAppendix?dxtix=${dxtNext}#ConclusionAppendix`}>
            <Text variant="h3" css={{
                textAlign: 'center', "@media print": {display: 'none',},
            }}>新增加 {title}</Text>
        </RouterLink>
    </>;
};

//可重复分项简易模式的做法，框架样子的：  为了用hook必须加一层做嵌套组件的。
const ReproducibleView: React.FunctionComponent<ReproducibleViewProps> = (
    {orc,rep,table,aIdx}
) => {
    //针对简易模板还是可行的。
    // const renderUpper=useThreeRaftSurveyTbl({config: config割管垢样,
    //                 orc:orc?.[table]?.[aIdx], rep, slash:true,parentOrc:orc});
    return <div key={aIdx} css={{"@media not print": {marginTop: '1rem', marginBottom: '1rem'},}}>
        <div>
            <DirectLink
                href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ConclusionAppendix#ConclusionAppendix`}>
                <div css={{"@media print": {paddingBottom: '3.5rem', pageBreakInside: 'avoid'}}}>
                    <Text id={ `ConclusionAppendix${aIdx>0?'_'+aIdx:''}` } variant="h2" css={{
                        textAlign: 'center', marginTop: '1rem',
                    }}>公用管道全面检验结论报告附页 {aIdx ? aIdx : ''}</Text>
                    <div css={{display: 'flex', justifyContent: 'space-between'}}>
                        <Text>序号：{aIdx + 1}</Text>
                        <Text>报告编号：{rep.isp.no}</Text>
                    </div>
                </div>
            </DirectLink>
            <Table fixed={ [ "%"] }
                   css={{borderCollapse: 'collapse', "@media print": {marginTop: '-3.5rem'}}} tight miniw={800}>
                <TableHead>
                    <TableRow>
                        <Cell>发现问题及处理意见:</Cell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    <DirectLink href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ConclusionAppendix?dxtix=` + aIdx + `#ConclusionAppendix${aIdx>0?'_'+aIdx:''}`}>
                        <TableRow>
                            <Cell split={true}>
                                <div css={{minHeight: '2rem', whiteSpace: 'pre-wrap'}}>
                                    {orc?.[table]?.[aIdx]?.处理意见 || '／'}
                                </div>
                            </Cell>
                        </TableRow>
                    </DirectLink>
                </TableBody>
            </Table>
            <TailMenRowIspCheck orc={orc} rep={rep}
                                href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/ProjectList#ProjectList`}>
            </TailMenRowIspCheck>
        </div>
    </div>;
}
